<template>
  <div>
    <div class="floor">
      <div class="floor-header">
        <h3 class="title">精品推荐</h3>
        <a href="javascript:;" class="more">
          <span class="moreWord">更多</span>
          <van-icon class="iconfont" class-prefix="icon" name="iconfonti" id="moreIcon"></van-icon>
        </a>
      </div>
      <!-- 白酒馆 -->
      <div class="floor-title">
        <div class="box">
          <span></span>
          <h2>· 白酒馆 ·</h2>
          <span></span>
        </div>
      </div>
      <!-- 主题 -->
      <div class="floor-main">
        <div class="good-item" v-for="(item,index) in floors" :key="item.id" @click="clickItem(index,item.id)">
          <div class="good-pic">
            <img :src="item.pic" alt="">
          </div>
          <div class="good-desc">
            <h2>{{item.name}}</h2>
          </div>
          <div class="good-price">
            <span class="now-price">￥{{item.minPrice }}</span>&nbsp;
            <span class="pre-price">￥{{item.originalPrice }}</span>
            <van-icon class-prefix="icon" class="iconfont" name="jiahao" size="18" color="#C00000" id="plus" @click.stop="add_cart(item)"></van-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    floors: {
      type: Array,
      required: true
    }
  },
  methods: {
    clickItem (index, id) {
      this.$emit('clickItem', { index, id })
    },
    // 加入购物车
    add_cart (item) {
      // console.log(item)
      this.$emit('add_cart', item)
    }
  }
}
</script>

<style lang="scss" scoped>
  h2{
    margin: 0;
    padding: 0;
  }
  .floor{
    &-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 45px;
      padding: 0 11px;
      border-top:1px solid #eee ;
      border-bottom: 1px solid #eee;

      .title{
        font-size: 16px;
      }
      .more{
        display: flex;
        font-size: 15px;
        .moreWord{
          margin-right: 4.4px;
          color: #353535;
        }
        #moreIcon{
          font-size: 0.5rem;
          color: #f56456;
        }
      }
    }
    // 白酒馆
    &-title{
      width: 100%;
      height: 44px;
      background: #e5e5e5;
      display: flex;
      justify-content: center;
      .box{
        display: flex;
        align-items: center;
        span{
          display: block;
          width: 33px;
          height: 2px;
          background: #C00000;
          margin:0 10px;
        }
        h2{
          font-size: 16px;
          color: #C00000;
        }
      }
    }
    // 主体
    &-main{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
        box-sizing: border-box;
      .good-item{
        width: 50%;
        box-sizing: border-box;
        .good-pic{
          img{
            width: 100%;;
          }
        }
        .good-desc{
          padding:  0 10px;
          h2{
            width: 100%;
            font-size: 14px;
            height: 40px;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: break-all;
            text-align: center;
          }
        }
        .good-price{
          // padding: 0 10px;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .now-price{
            font-size: 16px;
            color: #f56456;
          }
          .pre-price{
            font-size: 10px;
            color: #999;
            text-decoration: line-through;
            margin-left: -40px;
          }
        }
      }
    }
  }
</style>
